<template>
  <v-dialog
    v-model="isShow"
    v-if="showToggle"
    persistent
    scrollable
    :width="width"
    class="dialogInputColor"
    :retain-focus="retainFocus"
  >
    <v-skeleton-loader :loading="loading" type="article, actions">
      <v-card>
        <v-card-title class="text-left pb-4" v-if="showTitleBar">
          <div class="xd_title fs-16">{{ title }}</div>
          <v-row class="px-4 py-2 d-flex justify-end">
            <slot name="title-right"></slot>
          </v-row>
        </v-card-title>
        <v-divider v-if="!hideDivider" />
        <v-card-text class="detail-wrap" :style="'max-height:' + height">
          <div class="dlg_body">
            <slot></slot>
          </div>
        </v-card-text>
        <v-divider v-if="!hideDivider" />
        <v-card-actions>
          <v-spacer />
          <template v-if="$scopedSlots.ctrl">
            <slot name="ctrl"></slot>
          </template>
          <template v-else>
            <v-btn
              v-if="!alert"
              depressed
              color="primary"
              outlined
              @click="cancel"
              >{{ cancelText }}</v-btn
            >
            <v-btn
              v-if="isSubmitBtn"
              outlined
              depressed
              color="primary"
              @click="submit"
              >{{ confirmText }}</v-btn
            >
          </template>
        </v-card-actions>
      </v-card>
    </v-skeleton-loader>
  </v-dialog>
</template>
<script lang="ts">
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
@Component({})
export default class XDialog extends Vue {
  @Prop({
    default: false,
  })
  loading?: boolean;
  @Prop({
    default: false,
  })
  strong?: boolean;
  @Prop({
    default: false,
  })
  hideDivider?: boolean;
  @Prop({
    default: "",
  })
  title?: string;
  @Prop({
    default: "确定",
  })
  confirmText?: string;
  @Prop({
    default: "取消",
  })
  cancelText?: string;
  @Prop({
    default: true,
  })
  isSubmitBtn?: boolean;
  @Prop({
    default: 1000,
  })
  width?: number;
  @Prop({
    default: "calc(100vh - 300px)",
  })
  height?: String;
  @Prop({ default: false })
  alert?: boolean;
  @Prop({ default: true })
  retainFocus?: boolean;

  isShow = false;
  get showToggle() {
    if (this.strong) {
      return this.isShow;
    } else {
      return true;
    }
  }

  get showTitleBar() {
    if (this.$slots.titleRight) return true;
    if (this.title) return true;
    return false;
  }
  show() {
    this.isShow = true;
  }
  hide() {
    this.$emit("hide");
    this.isShow = false;
  }
  cancel() {
    this.$emit("cancel");
    this.hide();
  }
  submit() {
    this.$emit("submit");
  }
}
</script>
<style lang="scss">
.xd_title_box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-content: center;
}
.detail-wrap {
  overflow-y: auto;
}
.dlg_body {
  // overflow-y: auto;
}
</style>
